<template>
  <div class="app-container">
    <label class="title" style="font-size: 20px;color: rgba(0,0,0,.85);font-weight: 600;line-height: 32px">公告管理</label>
    <div class="ant-pro-card-body">
      <div
        style="background-color: rgb(255, 255, 255); width: 100%; height: 360px; display: flex; place-content: center space-around; margin-top: 24px;">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
          <div class="ant-row ant-form-item ant-form-item-has-success">
            <div class="ant-col ant-col-6 ant-form-item-label">
              <label class="content" title="公告内容">公告内容:</label>
            </div>
            <div class="ant-col ant-col-18 ant-form-item-control">
              <div class="ant-form-item-control-input">
                <div class="ant-form-item-control-input-content">
                  <el-input type="textarea" :row="3" placeholder="请输入公告内容" v-model="form.content" :disabled="disabled"
                            style="width: 720px;"></el-input>
                </div>
              </div>
            </div>
          </div>
          <div class="ant-row ant-form-item">
            <div class="ant-col ant-col-6 ant-form-item-label">

            </div>
            <div class="ant-col ant-col-18 ant-form-item-control">
              <div class="ant-form-item-control-input">
                <div class="ant-form-item-control-input-content">
                  <el-button @click="cancel" style="display: none" id="cancel">取 消</el-button>
                  <el-button type="primary" @click="submitForm" style="display: none" id="save">保 存</el-button>
                  <el-button @click="editContent" id="edit" style="display: inline;margin-left: 0px">修 改</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
    import {notice, saveNotice} from "@/api/business/notice/notice";

    export default {
        name: "Notice",
        data() {
            return {
                // 遮罩层
                loading: true,
                // 导出遮罩层
                exportLoading: false,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 考点公告表格数据
                noticeList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    content: null,
                    gmtCreated: null,
                    gmtModified: null,
                    isDeleted: null
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {},
                disabled: true
            };
        },
        created() {
            this.getList();
        },
        methods: {
            /** 查询考点公告 */
            getList() {
                this.loading = true;
                notice().then(response => {
                    this.form = response.data;
                    this.loading = false;
                });
            },
            // 取消按钮
            cancel() {
              document.getElementById("cancel").style.display = "none";
              document.getElementById("save").style.display = "none";
              document.getElementById("edit").style.display = "inline";
              this.disabled=true;
            },
            /** 提交按钮 */
            submitForm() {
                saveNotice(this.form).then(response => {
                    this.getList();
                });
                document.getElementById("cancel").style.display = "none";
                document.getElementById("save").style.display = "none";
                document.getElementById("edit").style.display = "inline";
                this.disabled=true;
            },
            editContent(){
                document.getElementById("cancel").style.display = "inline";
                document.getElementById("save").style.display = "inline";
                document.getElementById("edit").style.display = "none";
                this.disabled=false;
            }
        }
    };
</script>
<style>
  .ant-pro-card-body {
    display: block;
    padding: 24px;
    height: 100%;
    box-sizing: border-box;
  }

  .ant-form-item {
    box-sizing: border-box;
    padding: 0;
    color: rgba(0, 0, 0, .85);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum", "tnum";
    margin: 0 0 24px;
    vertical-align: top;
  }

  .ant-form-item-label {
    display: inline-block;
    flex-grow: 0;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
  }

  .ant-col-6 {
    display: block;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .ant-col {
    position: relative;
    max-width: 100%;
    min-height: 1px;
  }

  .ant-row {
    display: flex;
    flex-flow: row wrap;
  }

  .ant-form-item-control {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .ant-col-18 {
    display: block;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .ant-form-item {
    box-sizing: border-box;
    padding: 0;
    color: rgba(0, 0, 0, .85);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum", "tnum";
    margin: 0 0 24px;
    vertical-align: top;
  }
</style>
